<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="./layui/layui.js"></script>
  <title>Document</title>
  <style>
    #app {
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="app" class="layui-container">
    <div class="layui-inline">
      <label class="layui-form-label">添加商品</label>
      <div class="layui-input-inline">
        <input type="text" placeholder="请输入商品名称" autocomplete="off" class="layui-input" v-model="good.name" required>
      </div>
      <div class="layui-input-inline">
        <input type="text" placeholder="请输入商品价格" autocomplete="off" class="layui-input" v-model="good.price">
      </div>
      <div class="layui-input-inline">
        <input type="text" placeholder="请输入商品数量" autocomplete="off" class="layui-input" v-model="good.number">
      </div>
      <div class="layui-input-inline">
        <input type="checkbox" lay-skin="primary" v-model="good.checked">是否上架
      </div>
      <div class="layui-input-inline">
        <button class="layui-btn layui-btn-sm" @click="addGood">添加商品</button>
      </div>
    </div>
    <table class="layui-table">
      <thead>
        <tr>
          <th>商品状态</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index1) in goods">
          <td><input type="checkbox" @change="changeCheck" v-model="item.checked"></td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>
            <button class="layui-btn layui-btn-normal layui-btn-xs" @click="descNum(index1)"
              :disabled="item.number === 1 ? true:false">-</button>
            {{item.number}}
            <button class="layui-btn layui-btn-normal layui-btn-xs" @click="addNum(index1)">+</button>
          </td>
          <td>{{item.number * item.price}}</td>
          <td>
            <button class="layui-btn layui-btn-sm layui-btn-danger" @click="delGood(index1)">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            <label for="AllCheck">
              <input type="checkbox" id="AllCheck" v-model="allCheck" @change="allCheckedChange">全选
            </label>
          </td>
          <td colspan="5">总计{{total}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="../vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        good: {
          // checked: true     //0表示下架,1表示上架
        },
        total: 0,
        allCheck: true,
        goods: [
          {
            name: '小灯草',
            price: 199,
            number: 50,
            checked: false     //0表示下架,1表示上架
          },
          {
            name: '嘟嘟莲',
            price: 109,
            number: 20,
            checked: true
          },
          {
            name: '琉璃百合',
            price: 2000,
            number: 15,
            checked: true
          },
          {
            name: '霓裳花',
            price: 99,
            number: 8,
            checked: true
          },
          {
            name: '天草果实',
            price: 1099,
            number: 30,
            checked: true
          },
        ]
      },
      methods: {
        //添加商品
        addGood() {
          for (let key in this.good) {
            //全为空，则不增加
            if (!this.good[key]) return;
            this.goods.push(this.good);
            this.caclTotal();
            this.good = {};
          }
        },
        //增加数量
        addNum(index1) {
          this.goods[index1].number++;
          this.caclTotal();
        },
        //减少数量
        descNum(index1) {
          this.goods[index1].number--;
          this.caclTotal();
        },
        //点击全选
        allCheckedChange() {
          this.goods.forEach(item => {
            item.checked = this.allCheck
          });
          this.caclTotal();
        },
        //设置全选状态
        setAllCheckState() {
          const check = this.goods.every(item => item.checked);
          this.allCheck = check;
        },
        //改变单个商品勾选
        changeCheck() {
          this.caclTotal();
          this.setAllCheckState();
        },
        //删除商品
        delGood(index1) {
          const that = this;
          layer.confirm('确定删除吗？', { icon: 3, title: '删除商品' },
            function (index) {
              that.goods.splice(index1, 1);
              that.caclTotal();
              layer.close(index);
            },
          );
          this.caclTotal();
        },
        //计算总价
        caclTotal() {
          //清除上一次计算总价的影响
          this.total = 0;
          //过滤出已勾选的商品
          const arr = this.goods.filter(item => item.checked);
          arr.forEach(item => {
            this.total += item.price * item.number;
          })
        }
      }
    })
    app.caclTotal();
    app.setAllCheckState();
  </script>
</body>

</html>